<template>
  <div class="fx hotel_card" v-if="partListCon">
    <p class="fx">
      <span>你要去哪里？</span>
      <span>入驻日期</span>
      <span>共2晚</span>
    </p>
    <p class="fx">
      <span>福州市</span>
      <span>6月9日 - 6月11日</span>
    </p>
    <p class="fx">
      <span>查找酒店</span>
    </p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  components: {},
  props: {
    index: {
      type: Number,
      default: -1,
    },
  },
  computed: {
    ...mapState({
      active: (state) => state.modulePage.active,
      bannerNowIndex: (state) => state.modulePage.bannerNowIndex || 0,
      allbanner: (state) => state.modulePage.allbanner,
      partListCon() {
        if (this.index >= 0) {
          if (this.allbanner[this.index].text > 0) {
            this.getnewslist(this.allbanner[this.index].text);
          }
          return this.allbanner[this.index];
        } else {
          return {};
        }
      },
    }),
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.hotel_card {
  width: 96%;
  height: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px;
  flex-direction: column;
  margin: 10px auto;
  > p {
    width: 100%;
    padding: 5px 0;
    &:nth-of-type(1) {
      font-size: 12px;
      color: #b5b5b5;
      > span {
        width: 33%;
        &:nth-of-type(3) {
          color: #333333;
          text-align: right;
        }
      }
    }
    &:nth-of-type(2) {
      font-size: 18px;
      color: #222222;
      > span {
        width: 33%;
        &:nth-of-type(2) {
          width: 66%;
        }
      }
    }
    &:nth-of-type(3) {
      font-size: 20px;
      font-weight: bold;
      color: #222222;
      text-align: center;
      justify-content: center;
      > span {
        width: 80%;
        background: #ffdd00;
        padding: 5px 0;
        border-radius: 3px;
      }
    }
  }
}
</style>
